import React, { useCallback, useEffect, useState } from 'react'
import { useNavigate } from 'react-router';
import { httpGetVideoListWithURL } from '../apis'
import VideoCard from "../components/VideoCard"

import "./Video.scss";

export default function Video() {
    const [list,setList] = useState([]);
    const navigate = useNavigate();
    useEffect(()=>{
      async function getList() {
        let res = await httpGetVideoListWithURL();
        setList(res);
      }
      getList();
    },[]);
    const handleClick = useCallback((videoId)=>{
      let video;
      list.some((v)=>{
        if(v.videoId===videoId) {
          video = v; 
          return true;
        }
        return false;
      })
      navigate(`/video/${videoId}`,{
        state: {
          video
        }
      });
    },[list]);
    return (
        <div className='Video-container'>
          {
            list.map(v=>(
              <VideoCard {...v} key={v.videoId} handleClick={handleClick}></VideoCard>
            ))
          }
        </div>
    )
}
